<!DOCTYPE html>
<html style="height:100%">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body>
<div id="box">
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    <div v-html="rawHtml"></div>
</div>
<div style="background: red;color: #fff;font-size: 20px">
    <a style="font-size: 12px;">swsws</a>
    我是一段可爱的文字
</div>

</body>
<script src="src/js/vue.js" type="text/javascript"></script>


<script type="text/javascript">
    Vue.component("todo-item",{
        props: ['todo'],
        template:'<li>{{todo.text}}</li>'
    })
    new Vue({
        el:"#box",
        data:{
            groceryList:[
                { text: 'Vegetables' },
                { text: 'Cheese' },
                { text: 'Whatever else humans are supposed to eat' }
            ],
            rawHtml:"<div><input type='text' /></div>"
        }
    })
</script>
</html>